<template>
  <div class="news-container">
    <!-- 搜索栏 -->
    <el-input v-model="searchQuery" placeholder="搜索新闻" @input="filterNews" clearable></el-input>
    <!-- 新闻列表 -->
    <el-tabs v-model="activeTab">
      <!-- 农业要闻 -->
      <el-tab-pane label="农业要闻" name="current-news">
        <div class="news-list" v-for="news in paginatedCurrentNews" :key="news.id">
          <el-card :body-style="{ padding: '10px' }" class="custom-green-card" shadow="never" @click="viewDetails(news)">
            <div class="news-content">
              <p class="news-title">{{ news.title }}</p>
              <div class="news-meta">
                <span>{{ news.date }}</span>
                <span v-if="news.summary">{{ news.summary }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <!-- 中心动态 -->
      <el-tab-pane label="中心动态" name="headline">
        <div class="news-list" v-for="news in paginatedCenterDynamicNews" :key="news.id">
          <el-card :body-style="{ padding: '10px' }" class="custom-green-card" shadow="never" @click="viewDetails(news)">
            <div class="news-content">
              <p class="news-title">{{ news.title }}</p>
              <div class="news-meta">
                <span>{{ news.date }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <!-- 全国信息联播 -->
      <el-tab-pane label="全国信息联播" name="policy">
        <div class="news-list" v-for="news in paginatedNationalBroadcastNews" :key="news.id">
          <el-card :body-style="{ padding: '10px' }" class="custom-green-card" shadow="never" @click="viewDetails(news)">
            <div class="news-content">
              <p class="news-title">{{ news.title }}</p>
              <div class="news-meta">
                <span>{{ news.date }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination background :page-size="5" :current-page="currentPage" :layout="'prev, pager, next'" :total="filteredNews.length" @current-change="handlePageChange" />
    </div>
    <!-- 引用 BottomNav.vue -->
    <BottomNav />
  </div>
</template>

<script>
import BottomNav from '/src/views/BottomNav.vue'; // 根据 BottomNav.vue 的实际路径进行调整

export default {
  components: {
    BottomNav
  },
  data() {
  return {
    searchQuery: '',
    currentPage: 1,
    activeTab: 'current-news',
    news: [
      { id: 1, title: '全国大部分产区苹果花期较常年提前 花期冻害风险等级为轻至中度', date: '2025-05-15', summary: '“苹果花期冻害预警”研讨会' },
      { id: 2, title: '一季度粮食进口有望明显减少 有利于国内粮食价格持续回升', date: '2025-05-13', summary: '分析一季度粮食进口的情况' },
      { id: 3, title: '“智慧农业关键技术集成与应用系列丛书”正式发布',date: '2025-05-13', summary: '介绍新出版的“智慧农业”丛书' },
      { id: 4, title: '农业补贴政策调整引发广泛关注', date: '2025-05-10', summary: '解读新政策细节' },
      { id: 5, title: '新型肥料技术助力作物生长', date: '2025-05-08', summary: '介绍肥料技术革新' },
      { id: 6, title: '农业保险保障农户利益' , date: '2025-05-07', summary: '农业保险政策解析' },
      { id: 7, title: '绿色农业发展论坛举办', date: '2025-04-27', summary: '论坛聚焦绿色农业发展' },
      { id: 8, title: '农业科技改变生产模式', date: '2025-04-22', summary: '探讨农业科技的应用' },
      { id: 9, title: '农业机械展览会开幕', date: '2025-04-20', summary: '展示最新农业机械' },
      { id: 10, title: '农业环保意识提升', date: '2025-04-13', summary: '加强农业环境保护' },
      { id: 11,title: '垂直农场技术突破 城市农业产能提升300%',date: '2025-04-13',summary: '多层立体栽培系统技术应用'},
      { id: 12,title: '基因编辑作物新品种通过审定 抗病能力提升60%',date: '2025-04-12', summary: 'CRISPR技术作物生物安全评价通过'},
      { id: 13,title: '农业碳汇交易试点启动 每亩农田年收益增加200元',date: '2025-04-10', summary: '农田生态系统固碳价值转化机制'},
      { id: 14, title: '全国冬小麦主产区病虫害发生趋势及防控建议',date: '2025-04-06',  summary: '农业农村部发布小麦病虫害防治预警' },
      { id: 15, title: '长江流域早稻移栽进度及田间管理技术要点',date: '2025-04-09',  summary: '早稻生产关键期技术指导' },
      { id: 16, title: '东北地区玉米大豆带状复合种植面积扩大 机械化播种进展顺利', date: '2025-04-03',  summary: '粮油产能提升工程推进情况' },
      { id: 17, title: '华南地区热带水果产区遭遇强降水 荔枝龙眼保果稳产措施', date: '2025-04-03', summary: '应对极端天气的果树管理建议' },
      { id: 18, title: '黄淮海地区夏播作物种子供需情况分析 主推品种稳产性评估', date: '2025-03-20', summary: '夏季粮油生产种子保障报告' },
      { id: 19, title: '西南地区马铃薯晚疫病监测预警及综合防治方案', date: '2025-03-17', summary: '薯类作物重大病害防控部署' },
      { id: 20, title: '西北地区设施蔬菜连作障碍治理成效 土壤改良技术推广案例', date: '2025-03-16', summary: '设施农业可持续发展实践' },
    
    ],
    centerDynamicNews: [
  {
    id: 21,
    title: '农业农村部信息中心2025年度公开招聘应届高校毕业生补充公告',
    date: '2025-05-10',
    summary: '新增农业大数据分析、网络安全运维岗位，推动人才结构升级'
  },
  {
    id: 22,
    title: '农业农村部信息中心主任李兵赴四川会理调研石榴产业数字化',
    date: '2025-05-08',
    summary: '推进全产业链数据整合，打造国际知名品牌'
  },
  {
    id: 23,
    title: '农业农村部召开数字农业农村标准体系建设推进会',
    date: '2025-05-05',
    summary: '部署2025年重点任务，推动标准落地实施'
  },
  {
    id: 24,
    title: '全国农产品质量安全追溯管理培训班在云南昆明举办',
    date: '2025-04-30',
    summary: '培训120余名代表，强化追溯体系推广应用'
  },
  {
    id: 25,
    title: '农业农村部信息中心赴山东寿光调研蔬菜产业互联网发展', 
    date: '2025-04-25', 
    summary: '建设蔬菜产业互联网平台，推动C2M定制农业模式'
  },
  {
    id: 26,
    title: '2025年农业农村信息化示范基地申报工作启动', 
    date: '2025-04-20', 
    summary: '计划认定100个示范基地，带动100万农户增收'
  },
  {
    id: 27,
    title: '农业农村部信息中心与京东科技签署智慧农业战略合作协议', 
    date: '2025-04-15', 
    summary: '共建10个智慧农业示范园区，推广无人农场应用'
  },
  {
    id: 28,
    title: '农业农村部数据安全管理办法（征求意见稿）公开征求意见', 
    date: '2025-04-10', 
    summary: '加强农业农村数据安全管理，规范数据采集使用流程'
  },
  {
    id: 29,
    title: '农业农村部信息中心赴黑龙江调研黑土地保护数字化监测', 
    date: '2025-04-05', 
    summary: '构建数字底座，提升耕地质量动态监管能力'
  },
  {
    id: 30,
    title: '全国农业农村系统网络安全培训班在江苏南京开班', 
    date: '2025-03-30', 
    summary: '提高网络安全意识，强化应急响应机制'
  },
  {
    id: 31,
    title: '农业农村部信息中心发布2024年农业农村大数据发展报告', 
    date: '2025-03-25', 
    summary: '总结大数据发展成效，提出2025年重点任务'
  },
  {
    id: 32,
    title: '农业农村部启动智慧农业创新应用基地建设', 
    date: '2025-03-20', 
    summary: '新建100个数字农业基地，推动5G北斗技术落地'
  },
  {
    id: 33,
    title: '全国数字乡村建设现场推进会在浙江安吉召开', 
    date: '2025-03-15', 
    summary: '优化直报流程，提升数据采集效率和准确性'
  },
  {
    id: 34,
    title: '农业农村部与国家气象局签署气象为农服务战略合作协议', 
    date: '2025-03-10', 
    summary: '深化苹果全产业链大数据模型应用，提升研判精度'
  },
  {
    id: 35,
    title: '农业农村部发布2025年数字农业农村建设工作要点', 
    date: '2025-03-05', 
    summary: '新建100个数字农业基地，推动5G北斗全面应用'
  }
],
    nationalBroadcastNews: [
    {
        "id": 36,
        "title": "河北|大米小米相遇记",
        "date": "2025-05-15",
        "summary": "推进稻谷与谷子产业融合，打造主食升级示范"
    },
    {
        "id": 37,
        "title": "辽宁|辽宁今年新建200个农业特色产业标准化生产基地",
        "date": "2025-04-28",
        "summary": "新建200个标准化基地，推动农业高质量发展"
    },
    {
        "id": 38,
        "title": "四川|成都平原建成西南首个智慧农业气象监测网络",
        "date": "2025-04-08",
        "summary": "建成智慧气象网络，提升农业防灾减灾能力"
    },
    {
        "id": 39,
        "title": "山东|全国首个数字孪生农场管理平台上线",
        "date": "2025-03-20",
        "summary": "数字孪生平台上线，引领智慧农业新方向"
    },
    {
        "id": 40,
        "title": "江苏|长三角智慧渔业大数据中心启用",
        "date": "2025-02-28",
        "summary": "启用智慧渔业中心，助力长三角渔业现代化"
    },
    {
        "id": 41,
        "title": "广东|全国首个农业碳汇交易平台上线",
        "date": "2025-02-05",
        "summary": "上线农业碳汇平台，探索绿色发展新路径"
    },
    {
        "id": 42,
        "title": "河南|建成全国最大小麦全产业链大数据平台",
        "date": "2025-01-15",
        "summary": "建成小麦大数据平台，推动全产业链升级"
    },
    {
        "id": 43,
        "title": "黑龙江|北大荒集团建成无人化农场集群",
        "date": "2024-12-28",
        "summary": "建成无人化农场集群，示范农业现代化"
    },
    {
        "id": 44,
        "title": "新疆|建成全国最大棉花智慧物流体系",
        "date": "2024-12-03",
        "summary": "建成棉花智慧物流，提升产业竞争力"
    },
    {
        "id": 45,
        "title": "福建|平潭建成东南沿海最大海上智慧养殖平台",
        "date": "2024-11-13",
        "summary": "建成海上智慧养殖平台，发展深远海渔业"
    },
    {
        "id": 46,
        "title": "云南|建成全国首个高原特色农业区块链溯源平台",
        "date": "2024-10-25",
        "summary": "建成区块链溯源平台，保障农产品质量"
    },
    {
        "id": 47,
        "title": "湖北|建成全国首个小龙虾产业大脑",
        "date": "2024-09-27",
        "summary": "建成小龙虾产业大脑，推动全链数字化"
    },
    {
        "id": 48,
        "title": "浙江|数字乡村建设三年行动计划成效显著",
        "date": "2024-08-29",
        "summary": "数字乡村建设成效显著，引领全国示范"
    },
    {
        "id": 49,
        "title": "内蒙古|建成全国最大牧草智慧产业集群",
        "date": "2024-08-03",
        "summary": "建成牧草智慧集群，保障奶业优质发展"
    },
    {
        "id": 50,
        "title": "海南|建成全球首个热带农业基因库",
        "date": "2024-07-06",
        "summary": "建成热带农业基因库，助力种业创新"
    },
    {
        "id": 51,
        "title": "陕西|建成全国首个苹果产业大数据平台",
        "date": "2024-06-10",
        "summary": "建成苹果大数据平台，推动产业提质增效"
    },
    {
        "id": 52,
        "title": "广西|建成全国最大蔗糖产业智慧云平台",
        "date": "2024-05-15",
        "summary": "建成蔗糖智慧云平台，巩固糖业优势"
    },
    {
        "id": 53,
        "title": "江西|建成全国首个富硒农业产业大数据平台",
        "date": "2024-04-20",
        "summary": "建成富硒农业平台，打造特色农业经济"
    },
    {
        "id": 54,
        "title": "北京|建成全国首个都市农业元宇宙平台",
        "date": "2024-03-25",
        "summary": "建成都市农业元宇宙，探索城乡融合新路径"
    },
    {
        "id": 55,
        "title": "青海|建成全国首个有机畜牧业大数据平台",
        "date": "2024-02-23",
        "summary": "建成有机畜牧平台，推动绿色产业发展"
    }
],
    filteredCurrentNews: [],
    filteredCenterDynamicNews: [],
    filteredNationalBroadcastNews: []
  };
},

  computed: {
    paginatedNews() {
      if (this.activeTab === 'current-news') {
        return this.paginatedCurrentNews;
      } else if (this.activeTab === 'headline') {
        return this.paginatedCenterDynamicNews;
      } else if (this.activeTab === 'policy') {
        return this.paginatedNationalBroadcastNews;
      }
      return [];
    },
    paginatedCurrentNews() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      return this.filteredCurrentNews.slice(start, end);
    },
    paginatedCenterDynamicNews() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      return this.filteredCenterDynamicNews.slice(start, end);
    },
    paginatedNationalBroadcastNews() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      return this.filteredNationalBroadcastNews.slice(start, end);
    },
    filteredNews() {
      if (this.activeTab === 'current-news') {
        return this.filteredCurrentNews;
      } else if (this.activeTab === 'headline') {
        return this.filteredCenterDynamicNews;
      } else if (this.activeTab === 'policy') {
        return this.filteredNationalBroadcastNews;
      }
      return [];
    }
  },
  methods: {
    filterNews() {
      if (this.activeTab === 'current-news') {
        this.filteredCurrentNews = this.news.filter((news) => news.title.toLowerCase().includes(this.searchQuery.toLowerCase()));
      } else if (this.activeTab === 'headline') {
        this.filteredCenterDynamicNews = this.centerDynamicNews.filter((news) => news.title.toLowerCase().includes(this.searchQuery.toLowerCase()));
      } else if (this.activeTab === 'policy') {
        this.filteredNationalBroadcastNews = this.nationalBroadcastNews.filter((news) => news.title.toLowerCase().includes(this.searchQuery.toLowerCase()));
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    viewDetails(news) {
      this.$router.push(`/news/${news.id}`); // 点击新闻卡片进入对应的详情页
    },
    navigateTo(path) {
      this.$router.push(path);
    }
  },
  created() {
    this.filteredCurrentNews = this.news;
    this.filteredCenterDynamicNews = this.centerDynamicNews;
    this.filteredNationalBroadcastNews = this.nationalBroadcastNews;
  }
};
</script>

<style scoped>
.news-container {
  padding: 15px;
  min-height: 100vh;
  background: #f0fff0; /* 修改为比较浅的绿色，而不是渐变 */
}

.pagination {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.custom-green-card {
  border: 1px solid #90ee90; /* 添加淡绿色边框 */
  margin-bottom: 15px; /* 为每个新闻卡片添加间距 */
  border-radius: 5px; /* 边框圆角 */
  transition: box-shadow 0.3s ease; /* 添加悬停时的过渡效果 */
}

.custom-green-card:hover {
  box-shadow: 0px 4px 10px rgba(0, 128, 0, 0.2); /* 悬停时显示阴影 */
}
</style>
